import React, { useState } from "react";
import { Table, Tooltip, Modal, Form, Input, InputNumber, message } from "antd";
import { UpdatejobApi } from "../../api/recruiter";
import "../../assets/style/jobList.css"; // 引入样式文件

const JobList = ({ jobs, onJobUpdate }) => {
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [currentJob, setCurrentJob] = useState(null);
  const [form] = Form.useForm();

  const handleEdit = (record) => {
    setCurrentJob(record);
    form.setFieldsValue(record);
    setIsEditModalVisible(true);
  };

  const handleEditSubmit = async () => {
    try {
      const values = await form.validateFields();

      if (!currentJob?.job_id) {
        message.error("职位信息无效");
        return;
      }

      const updatedJob = await UpdatejobApi(currentJob.job_id, values);

      if (updatedJob) {
        setIsEditModalVisible(false);
        message.success("更新成功");
        onJobUpdate?.(updatedJob);
        form.resetFields();
      }
    } catch (error) {
      console.error("更新失败:", error);
      message.error(error.response?.data?.message || "更新失败");
    }
  };

  const columns = [
    {
      title: "职位名称",
      dataIndex: "job_name",
      key: "job_name",
      width: 180, // 减小宽度
      render: (text, record) => (
        <div>
          <span style={{ fontWeight: "bold" }}>{text}</span>
          <span style={{ color: "orange", marginLeft: 8 }}>
            {record.salary}k
          </span>
        </div>
      ),
    },
    {
      title: "公司信息",
      dataIndex: "company",
      key: "company",
      width: 200, // 减小宽度
      render: (text, record) => (
        <div>
          <div>{text}</div>
          <div style={{ fontSize: "12px", color: "#666" }}>
            {record.company_address}
          </div>
        </div>
      ),
    },
    {
      title: "职位详情",
      dataIndex: "detail",
      key: "detail",
      width: 200, // 固定宽度
      ellipsis: {
        showTitle: false, // 关闭默认 title 显示
      },
      render: (text) => (
        <Tooltip placement="topLeft" title={text}>
          <span>{text.length > 20 ? `${text.slice(0, 20)}...` : text}</span>
        </Tooltip>
      ),
    },
    {
      title: "联系人",
      key: "contact",
      width: 150,
      render: (_, record) => (
        <div>
          <div>{record.head}</div>
          <div style={{ fontSize: "12px", color: "#666" }}>{record.posts}</div>
        </div>
      ),
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      key: "updated_at",
      width: 100,
      render: (text) => <span>{new Date(text).toLocaleDateString()}</span>,
    },
    {
      title: "操作",
      key: "action",
      width: 80, // 减小宽度
      fixed: "right",
      render: (_, record) => <a onClick={() => handleEdit(record)}>编辑</a>,
    },
  ];

  return (
    <>
      <Table
        className="custom-table"
        columns={columns}
        dataSource={jobs}
        rowKey="job_id"
        pagination={false}
        style={{ backgroundColor: "white" }}
        scroll={{ y: "calc(100vh - 280px)" }}
        bordered
      />

      <Modal
        title="编辑职位"
        open={isEditModalVisible}
        onOk={handleEditSubmit}
        onCancel={() => {
          setIsEditModalVisible(false);
          form.resetFields();
        }}
        okText="保存"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="horizontal"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <Form.Item
            label="职位名称"
            name="job_name"
            rules={[{ required: true, message: "请输入职位名称" }]}
          >
            <Input placeholder="请输入职位名称" />
          </Form.Item>
          <Form.Item
            label="公司名称"
            name="company"
            rules={[{ required: true, message: "请输入公司名称" }]}
          >
            <Input placeholder="请输入公司名称" />
          </Form.Item>
          <Form.Item
            label="企业规模"
            name="company_size"
            rules={[{ required: true, message: "请输入企业规模" }]}
          >
            <InputNumber min={1} style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item
            label="薪资"
            name="salary"
            rules={[{ required: true, message: "请输入薪资" }]}
          >
            <InputNumber min={0} style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item
            label="职位详情"
            name="detail"
            rules={[{ required: true, message: "请输入职位详情" }]}
          >
            <Input.TextArea rows={4} />
          </Form.Item>
          <Form.Item
            label="负责人"
            name="head"
            rules={[{ required: true, message: "请输入负责人" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="负责人职位"
            name="posts"
            rules={[{ required: true, message: "请输入负责人职位" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="企业地址"
            name="company_address"
            rules={[{ required: true, message: "请输入企业地址" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="所属行业"
            name="company_industry"
            rules={[{ required: true, message: "请输入所属行业" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="企业邮箱"
            name="company_email"
            rules={[
              { required: true, message: "请输入企业邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default JobList;
